<template>
  <div>
    <div class="list-btn">
      姓名:<Input v-model.trim="params.realname" placeholder="请输入姓名" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      手机号:<Input v-model.trim="params.phone" placeholder="请输入手机号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      订单号:<Input v-model.trim="params.nid" placeholder="请输入订单号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      放款时间:<DatePicker type="date" @on-change="startTime"  placeholder="选择开始时间" style="width: 200px"></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束时间" style="width: 200px" ></DatePicker>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>

    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    data () {
      return {

        tag: {
          'title': '放款失败',
          'path': '/work/payFail/list'
        },
       listTitle: [
          {
            title: '订单号',
            minWidth: 180,
            key: 'nid',
            align:'left',
          },
         {
           title: '放款时间',
           key: 'auditingTime',
           minWidth:150,
           align:'center',
           render:(h,params) => {
             return h('div',this.getLocalTime(params.row.auditingTime))
           }
         },
          {
            title: '用户姓名',
            key: 'realname',
            minWidth:120,
            align:'center'
          },
          {
            title: '手机号',
            key: 'phone',
            minWidth:120,
            align:'center',
            render: (h, params) => {
              let phone = params.row.phone;
              return h('div', `${phone.substr(0,3)}****${phone.substr(7)}`)
            }
          },
          {
            title: '借款金额(元)',
            key: 'money',
            minWidth:140,
            align:'center',
             render:(h,params) => {
              return h('div',this.toYuan(params.row.money))
            }
          },
          {
            title: '借款费用(元)',
            key: 'loanCost',
            minWidth:140,
            align:'center',
             render:(h,params) => {
              return h('div',this.toYuan(params.row.loanCost))
            }

          },
       /*   {
            title: '实放金额(元)',
            key: 'realMoney',
            minWidth:140,
            align:'center',
            render: (h,params) => {
              return h('div',params.row.realMoney ? params.row.realMoney  : '—' )
            }
          },*/
          {
            title: '银行名称',
            key: 'bankName',
            minWidth:120,
            align:'center'
          },
          {
            title: '银行卡号',
            key: 'bankNum',
            minWidth:200,
            align:'center'
          },
          {
            title: '放款通道',
            key: 'lendingChannel',
            minWidth:110,
            align:'center',
            render:(h,params) => {
              return h('div',this.getType(params.row.lendingChannel,'lendingChannel'))
            }
          },
          {
            title: '失败原因',
            key: 'payRemark',
            minWidth:200,
            align:'center',
          },
         /*{
           title: '操作',
           key: 'action',
           minWidth: 150,
           align: 'center',
           render: (h, params) => {
             return h('div', [
               h('Button', {
                 props: {
                   type: 'primary',
                   size: 'small'
                 },
                 style: {
                   marginRight: '5px'
                 },
                 on: {
                   click: () => {
                     this.$Modal.confirm({
                       title: '提示',
                       content: '<p style="font-size:16px">确定要放款吗？</p>',
                       onOk: () => {
                         this.$post('/bkfinancialloan/lending/manual',{id:params.row.id})
                           .then (res => {
                             if(res.code == 0){
                               this.$Message.info('放款成功');
                               this.getList(this.url);
                             }else{
                               this.$Message.error(res.msg)
                             }
                           }).catch(e => console.log(e))
                       },
                       onCancel: () => {

                       }
                     });
                   }
                 }
               }, '手动放款')
             ]);
           }
         }*/

        ],
        url: '/bkfinancialloan/fail/list',
        nameListUrl: '',
        params: {
          name: '',
          nameList: [],
          pageNum: 1,
          pageSize: 10
        },

      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

</style>
